<template>
    <el-dialog class="edit-dialog" :title="title" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" :label-position="labelPosition" size="small" ref="formRef" :rules="rules">
            <el-row :gutter="50">
               <!-- <el-col :span="24">
                    <el-form-item prop="name">
                        <span slot="label">用户名</span>
                        <el-input autocomplete="off" v-model="form.name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                </el-col> -->
 
            </el-row>
            <el-row :gutter="50">
                <el-col :span="24">
                    <el-form-item prop="use_name">
                        <span slot="label">公司名称</span>
                        <el-input autocomplete="off" v-model="form.use_name" placeholder="请输入公司名称">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="24">
                    <el-form-item prop="title">
                        <span slot="label">标题</span>
                        <el-input autocomplete="off" v-model="form.title" placeholder="请输入标题">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="24">
                    <el-form-item prop="">
                        <span slot="label">文案</span>
                        <el-input type="textarea" autocomplete="off" v-model="form.copywriting" placeholder="请输入文案">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
			<el-row :gutter="50">
			    <el-col :span="24">
			        <el-form-item prop="keywords">
			            <span slot="label">关键字</span>
			            <el-input autocomplete="off" v-model="form.keywords" placeholder="请输入关键字">
			            </el-input>
			        </el-form-item>
			    </el-col>
			</el-row>
			<el-row :gutter="50">
			    <el-col :span="24">
			        <el-form-item prop="theme">
			            <span slot="label">主题切入点</span>
			            <el-input autocomplete="off" v-model="form.theme" placeholder="请输入主题切入点">
			            </el-input>
			        </el-form-item>
			    </el-col>
			</el-row>
			<!-- <el-row :gutter="50">
			    <el-col :span="24">
			        <el-form-item prop="scheme_type">
			            <span slot="label">文案类型</span>
			            <el-input autocomplete="off" v-model="form.scheme_type" placeholder="请输入文案类型">
			            </el-input>
			        </el-form-item>
			    </el-col>
			</el-row> -->
			<el-row :gutter="50">
				<el-col :span="24">
					<el-form-item prop="scheme_type">
						<span slot="label">文案类型</span>
						<el-select v-model="form.scheme_type" @change="pickChange" placeholder="请选择">
							<el-option v-for="item in Scheme_type" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			
			</el-row>
			<el-row :gutter="50">
			    <el-col :span="24">
			        <el-form-item prop="remarks">
			            <span slot="label">备注</span>
						 <el-input type="textarea" autocomplete="off" v-model="form.remarks" placeholder="请输入备注">
			        <!--    <el-input autocomplete="off" v-model="form.remarks" placeholder="请输入备注"> -->
			            </el-input>
			        </el-form-item>
			    </el-col>
			</el-row>
			
			
            <el-row :gutter="50">
                <el-col :span="24">
                    <el-form-item prop="">
                        <span slot="label">视频文件</span>
                        <el-upload
                                action="https://pm.ab0769.com/api/common/upload"
                                :auto-upload="true"
								:limit="vo_limit"
                                list-type="picture-card"
								:file-list="file_list"
								:on-success="on_success"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="">
                        <span slot="label">制作时间</span>
                        <el-date-picker
                                v-model="form.production_time"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="">
                        <span slot="label">播放量</span>
                        <el-input autocomplete="off" v-model="form.playback_volume" placeholder="请输入播放量">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item prop="">
                        <span slot="label">点赞量</span>
                        <el-input autocomplete="off" v-model="form.praise_quantity" placeholder="请输入点赞量">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="">
                        <span slot="label">评论/回复数量</span>
                        <el-input autocomplete="off" v-model="form.comment" placeholder="请输入评论/回复数量">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submits" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
	import {Message} from 'element-ui';
    export default {
        data() {
            return {
                value1:'',
                dialogFormVisible: false,
                labelPosition: "top",
                title: "",
				file_list:[],
				vo_limit:1,
                typelist: [
                    {
                        id: 1,
                        name: '咨询类'
                    },
                    {
                        id: 2,
                        name: '消费类'
                    },
                    {
                        id: 3,
                        name: '创意类'
                    },
                    {
                        id: 4,
                        name: '展现排名类'
                    }
                ],
				 Scheme_type: [
				    {
				        id: '农、林、牧、渔业',
				        name: '农、林、牧、渔业'
				    },{
				        id: '采矿业',
				        name: '采矿业'
				    },{
				        id: '制造业',
				        name: '制造业'
				    },{
				        id: '电力、热力、燃气及水生产和供应业',
				        name: '电力、热力、燃气及水生产和供应业'
				    },{
				        id: '建筑业',
				        name: '建筑业'
				    },{
				        id: '批发和零售业',
				        name: '批发和零售业'
				    },{
				        id: '交通运输、仓储和邮政业',
				        name: '交通运输、仓储和邮政业'
				    },{
				        id: '住宿和餐饮业',
				        name: '住宿和餐饮业'
				    },{
				        id: '信息传输、软件和信息技术服务业',
				        name: '信息传输、软件和信息技术服务业'
				    },{
				        id: '金融业',
				        name: '金融业'
				    },{
				        id: '房地产业',
				        name: '房地产业'
				    },{
				        id: '租赁和商务服务业',
				        name: '租赁和商务服务业'
				    },{
				        id: '科学研究和技术服务业',
				        name: '科学研究和技术服务业'
				    },{
				        id: '水利、环境和公共设施管理业',
				        name: '水利、环境和公共设施管理业'
				    },{
				        id: '居民服务、修理和其他服务业',
				        name: '居民服务、修理和其他服务业'
				    },{
				        id: '教育',
				        name: '教育'
				    },{
				        id: '卫生和社会工作',
				        name: '卫生和社会工作'
				    },{
				        id: '文化、体育和娱乐业',
				        name: '文化、体育和娱乐业'
				    },{
				        id: '公共管理、社会保障和社会组织',
				        name: '公共管理、社会保障和社会组织'
				    },{
				        id: '国际组织',
				        name: '国际组织'
				    },{
				        id: '天网短视频获客系统',
				        name: '天网短视频获客系统'
				    }
				],
                statelist: [
                    {
                        id: 1,
                        name: '是'
                    },
                    {
                        id: 2,
                        name: '否'
                    }
                ],
                form: {
                    id: 0,
                    use_name: '',
					title:'',
					copywriting:'',
					video:'',
					playback_volume:'',
					praise_quantity:'',
					comment:'',
					production_time:'',
					scheme_type:'',
					theme:'',
					keywords:'',
					remarks:'',
                },
                rules: {
                    use_name: [{
                        required: true,
                        message: '用处名称',
                        trigger: 'blur'
                    }],
                    title: [{
                        required: true,
                        message: '标题',
                        trigger: 'change'
                    }],
                },

            };
        },
        methods: {
			  pickChange(val){
				this.$forceUpdate()
			    },
            init(item) {
               this.file_list=[];
			  this.form= {
			       id: 0,
				use_name: '',
			   	title:'',
			   	copywriting:'',
			   	video:'',
				use_name:'',
			   	playback_volume:'',
			   	praise_quantity:'',
			   	comment:'',
				remarks:'',
			   	production_time:'',
				theme:'',
				keywords:'',
			   };
			  
                this.dialogFormVisible = true;
                this.title = item ? '编辑视频制作记录' : '新增视频制作记录';
                setTimeout(() => { // DOM未渲染，所以开个定时器
                    this.$refs['formRef'].resetFields(); // 重置表单
                    this.form.id = item;
					
                }, 30);
				if(item!=undefined){
					this.$http.post("Videocreativity/lists",{'ids':item,'page':1,'limit':1}).then((response) => {
							if(response.data.total>0){
								this.form=response.data.records[0];
								delete this.form.user_name;
								delete this.form.updatetime;
								delete this.form.createtime;
								if(this.form.video){
									this.file_list.push({
										'name':"url.mp4",
										'url':this.form.video
									});
								}
							}
								
								
					});
				}
			
				
            },
            submits() {
				var thas=this;
				
				
                this.$refs['formRef'].validate((valid) => {
                    if (valid) {
						var path="Videocreativity/add"
                      if(this.form.id>0){
						  path='Videocreativity/edit'
					  }
					  this.$http.post(path,this.form).then((response) => {
					  		
							Message({
								type: 'success',
								message: '保存成功'
							});
							 setTimeout(() => {
								thas.$emit("refreshDataList");
							}, 1500) 
					  });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleRemove(file) {
                console.log(file);
            },
			on_success(response){
				console.log(response)
				this.file_list.push({
					'name':"url.mp4",
					'url':response.data.fullurl,
				});
				this.form.video=response.data.fullurl;
			},
            handlePictureCardPreview(file) {
                console.log(file);
            },
        },
    };
</script>

<style lang="scss">
    .edit-dialog {
        .el-dialog__body {
            padding-top: 0 !important;
        }

        .el-form-item {
            margin-bottom: 5px !important;
        }

        .el-form--label-top .el-form-item__label {
            padding-bottom: 0 !important;
        }

        .el-select {
            width: 100%;
        }

        .el-upload--picture-card {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    }
</style>
